<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father-1 {
        margin: 10px;
        background-color: aqua;
        width: 300px;
        border: 2px solid red; /* 为了看清父元素的边界 */
      }
      .child-1 {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        float: left; /* 子元素浮动 */
      }
      .other-1 {
        width: 200px;
        height: 150px;
        background-color: lightgreen;
        margin-top: 20px; /* 为了与其他元素有一些间距 */
      }

      /* 清除浮动方式1: 父元素添加伪类，clear: both,清除浮动 */
      .clear-1::after {
        content: '';
        display: block; /* 也可以是 'table' */
        clear: both; /* 清除浮动 */
      }

      /* 清除浮动方式2， 父元素添加overflow */
      .clear-2 {
        overflow: hidden; /* 或 auto */
      }

      /* 清除浮动方式3， 父元素添加边框或内编辑 */
      .clear-3 {
        /* 添加边框 */
        /* border: 1px solid black;  */
        /* 添加内边距 */
        padding: 150px;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>css盒子塌陷</h1>
      <div class="father-1">
        <div class="child-1">我是子元素，我浮动了！</div>
      </div>
      <div class="other-1">我是其他内容，应该显示在父元素下方。</div>
      <pre>
        <code>
          .father-1 {
            margin: 10px;
            background-color: aqua;
            width: 300px;
            border: 2px solid red; /* 为了看清父元素的边界 */
          }
          .child-1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: left; /* 子元素浮动 */
          }
          .other-1 {
            width: 200px;
            height: 150px;
            background-color: lightgreen;
            margin-top: 20px; /* 为了与其他元素有一些间距 */
          }
        </code>
      </pre>
    </div>
    <hr />
    <div>
      <h4>1. 父元素清除浮动：</h4>
      <p>
        在父元素内添加清除浮动的元素：在父元素的最后添加一个具有clear:
        both;样式的元素，可以清除浮动，防止父元素塌陷。但这种方法会引入不必要的冗余元素，不利于代码的维护和可读性。
      </p>
      <div class="father-1 clear-1">
          <code>
            父元素类：
            class="father-1 clear-1"
          </code>
        <div class="child-1">我是子元素，我浮动了！</div>
      </div>
      <div class="other-1">我是其他内容，应该显示在父元素下方。</div>
      <pre>
        <code>
          /* 清除浮动方式1: 父元素添加伪类，clear: both,清除浮动 */
        .clear-1::after {
          content: '';
          display: block; /* 也可以是 'table' */
          clear: both; /* 清除浮动 */
        }
        </code>
      </pre>
    </div>

    <div>
      <h4>2. 父元素添加overflow属性</h4>
      <p>
        为父元素添加overflow属性：设置overflow: hidden;或overflow:
        auto;可以使父元素包含浮动的子元素。但需要注意的是，overflow:
        hidden;可能会导致内容不可见，而overflow:
        auto;可能会出现滚动条，影响美观。
      </p>
      <div class="father-1 clear-2">
        <code>
          父元素类：
          class="father-1 clear-2"
        </code>
        <div class="child-1">我是子元素，我浮动了！</div>
      </div>
      <div class="other-1">我是其他内容，应该显示在父元素下方。</div>
      <pre>
        <code>
          /* 清除浮动方式2， 父元素添加overflow */
          .clear-2 {
            overflow: hidden; /* 或 auto */
          }
        </code>
      </pre>
    </div>

    <div>
      <h4>3. 父元素添加边框或内边距（这种方式不好）</h4>
      <p>
        为父元素添加边框或内边距：当子元素浮动时，父元素可能会出现塌陷现象。为了避免这种情况，可以为父元素添加边框或内边距。这种方法简单易行，但可能会改变页面布局或增加不必要的空间。
        （实际这种方式不好）
      </p>
      <div class="father-1 clear-3">
        <div class="child-1">我是子元素，我浮动了！</div>
      </div>
      <div class="other-1">我是其他内容，应该显示在父元素下方。</div>
    </div>

    <div>
      <h1></h1>
    </div>
  </body>
</html>
